<div class="app-window__content">
  <app-url-box
    [apiUrl]="apiUrl"
    [httpVerb]="(query$ | async)?.httpVerb"
    [isSubscribed]="isSubscribed$ | async"
    [isLoading]="(layout$ | async)?.isLoading"
    [showDocs]="showDocs$ | async"
    [selectedOperation]="selectedOperation$ | async"
    [queryOperations]="queryOperations$ | async"
    [streamState]="streamState$ | async"
    [currentCollection]="currentCollection$ | async"
    [hasUnsavedChanges]="hasUnsavedChanges$ | async"
    [windowId]="windowId()"
    [requestState]="loadingRequestState$ | async"
    (urlChange)="setApiUrl($event)"
    (httpVerbChange)="setApiMethod($event)"
    (sendRequest)="sendRequest()"
    (toggleDocsChange)="toggleDocs()"
    (reloadDocsChange)="reloadDocs()"
    (addToCollectionChange)="setShowAddToCollectionDialog(true)"
    (selectedOperationChange)="selectOperation($event)"
    (exportWindowChange)="exportWindowData()"
    (updateQueryInCollectionChange)="updateQueryInCollection()"
  />
  <div class="main-content-area">
    <div class="main-content-row" data-resize-container>
      <as-split [gutterSize]="5" [useTransition]="true">
        <as-split-area>
          <app-query-editor
            #queryEditor
            (queryChange)="updateQuery($event)"
            (sendRequest)="sendRequest($event)"
            (variablesChange)="updateVariables($event)"
            (toggleVariableDialog)="toggleVariableDialog($event)"
            (addFileVariableChange)="addFileVariable($event)"
            (fileVariableNameChange)="updateFileVariableName($event)"
            (fileVariableIsMultipleChange)="updateFileVariableIsMultiple($event)"
            (fileVariableDataChange)="updateFileVariableData($event)"
            (deleteFileVariableChange)="deleteFileVariable($event)"
            (queryEditorStateChange)="setQueryEditorState($event)"
            (showTokenInDocsChange)="onShowTokenInDocs($event)"
            (preRequestScriptChange)="updatePreRequestScript($event)"
            (preRequestEnabledChange)="updatePreRequestEnabled($event)"
            (postRequestScriptChange)="updatePostRequestScript($event)"
            (postRequestEnabledChange)="updatePostRequestEnabled($event)"
            (authTypeChange)="updateAuthType($event)"
            (authDataChange)="updateAuthData($event)"
            [windowId]="windowId()"
            [activeWindowId]="activeWindowId$ | async"
            [query]="query"
            [gqlSchema]="gqlSchema"
            [tabSize]="tabSize$ | async"
            [disableLineNumbers]="disableLineNumbers$ | async"
            [variables]="variables$ | async"
            [showVariableDialog]="showVariableDialog"
            [addQueryDepthLimit]="addQueryDepthLimit$ | async"
            [variableToType]="variableToType$ | async"
            [preRequest]="preRequest$ | async"
            [postRequest]="postRequest$ | async"
            [shortcutMapping]="editorShortcutMapping$ | async"
            [enableExperimental]="enableExperimental$ | async"
            [betaDisableNewEditor]="betaDisableNewEditor$ | async"
            [authorizationState]="authorizationState$ | async"
          />
        </as-split-area>
        <as-split-area>
          <app-query-result
            [queryResponses]="queryResponses$ | async"
            [responseTime]="responseTime$ | async"
            [responseStatus]="responseStatus$ | async"
            [responseStatusText]="responseStatusText$ | async"
            [responseHeaders]="responseHeaders$ | async"
            [requestScriptLogs]="requestScriptLogs$ | async"
            [isSubscribed]="isSubscribed$ | async"
            [isRunning]="(layout$ | async)?.isLoading"
            [subscriptionUrl]="subscriptionUrl"
            [tabSize]="tabSize$ | async"
            [autoscrollResponseList]="autoscrollResponseList$ | async"
            [windowId]="windowId()"
            [activeWindowId]="activeWindowId$ | async"
            [uiActions]="resultPaneUiActions$ | async"
            [hideExtensions]="(settings$ | async)?.['response.hideExtensions']"
            [bottomPanels]="resultPaneBottomPanels$ | async"
            (clearResultChange)="clearResult()"
            (downloadResultChange)="downloadResult($event)"
            (cancelRequestChange)="cancelRequest()"
            (autoscrollResponseListChange)="toggleAutoscrollSubscriptionResponses()"
            (uiActionExecuteChange)="onExecuteUiAction($event)"
            (bottomPanelActiveToggle)="togglePanelActive($event)"
          />
        </as-split-area>
        <as-split-area [visible]="showDocs$ | async">
          <app-doc-viewer
            [docView]="docView$ | async"
            [gqlSchema]="gqlSchema"
            [allowIntrospection]="allowIntrospection$ | async"
            [ngClass]="{ 'hide-doc': (showDocs$ | async) !== true }"
            [isLoading]="docsIsLoading$ | async"
            [addQueryDepthLimit]="addQueryDepthLimit$ | async"
            [hideDeprecatedDocItems]="hideDeprecatedDocItems$ | async"
            [tabSize]="tabSize$ | async"
            [lastUpdatedAt]="schemaLastUpdatedAt$ | async"
            (setDocViewChange)="setDocView($event)"
            (toggleDocsChange)="toggleDocs()"
            (addQueryToEditorChange)="addQueryToEditor($event)"
            (exportSDLChange)="exportSDL()"
            (loadSchemaChange)="loadSchemaFromSDL()"
          />
        </as-split-area>
      </as-split>
    </div>
  </div>
  <div class="dialogs">
    <nz-modal
      [nzVisible]="showHeaderDialog"
      (nzVisibleChange)="toggleHeader($event)"
      nzCloseIcon="close-circle"
      [nzTitle]="modalTitle"
      [nzContent]="modalContent"
      [nzFooter]="modalFooter"
      (nzOnCancel)="toggleHeader()"
    >
      <ng-template #modalTitle>
        <div class="app-dialog-header">
          <div class="app-dialog-title">{{ 'HEADERS_TEXT' | translate }}</div>
          {{ 'SET_HEADERS_DIALOG_SUBTEXT' | translate }}
        </div>
      </ng-template>

      <ng-template #modalContent>
        <app-headers-editor
          [headers]="headers$ | async"
          (headerEnabledChange)="headerEnabledChange($event.enabled, $event.index)"
          (headerKeyChange)="headerKeyChange($event.key, $event.index)"
          (headerValueChange)="headerValueChange($event.value, $event.index)"
          (addHeaderChange)="addHeader()"
          (removeHeaderChange)="removeHeader($event)"
          (doneChange)="toggleHeader()"
        />
      </ng-template>

      <ng-template #modalFooter>
        <div class="app-dialog-footer">
          <button
            type="button"
            class="btn btn--primary right"
            (click)="toggleHeader()"
          >
            {{ 'DONE_BUTTON' | translate }}
          </button>
        </div>
      </ng-template>
    </nz-modal>
    <app-request-handler-dialog
      [requestHandlerId]="(query$ | async)?.requestHandlerId"
      [requestHandlerAdditionalParams]="
        (query$ | async)?.requestHandlerAdditionalParams
      "
      [subscriptionUrl]="subscriptionUrl"
      [subscriptionConnectionParams]="subscriptionConnectionParams"
      [subscriptionUseDefaultRequestHandler]="
        (query$ | async)?.subscriptionUseDefaultRequestHandler
      "
      [selectedSubscriptionRequestHandlerId]="selectedSubscriptionRequestHandlerId"
      [requestHandlers]="availableRequestHandlers$ | async"
      [showDialog]="showRequestHandlerDialog"
      (toggleDialogChange)="toggleRequestHandlerDialog($event)"
      (requestHandlerInfoChange)="upateRequestHandlerInfo($event)"
    />
    <app-history-dialog
      [historyList]="historyList"
      [showDialog]="showHistoryDialog"
      (toggleDialogChange)="toggleHistoryDialog($event)"
      (restoreHistoryChange)="restoreHistory($event)"
      (clearHistoryChange)="clearHistory()"
    />
    <app-dialog
      [showDialog]="showPreRequestDialog"
      [heading]="'PRE_REQUEST_EDITOR_HEADER' | translate"
      [subheading]="'PRE_REQUEST_EDITOR_SUBTEXT' | translate"
      (toggleDialog)="togglePreRequestDialog($event)"
    >
      <app-pre-request-editor
        [preRequest]="preRequest$ | async"
        (preRequestScriptChange)="updatePreRequestScript($event)"
        (preRequestEnabledChange)="updatePreRequestEnabled($event)"
      />
    </app-dialog>
    <app-request-extensions-dialog
      [showDialog]="showRequestExtensionsDialog$ | async"
      [data]="(query$ | async)?.requestExtensions"
      (toggleDialogChange)="toggleRequestExtensionsDialog($event)"
      (dataChange)="updateRequestExtensions($event)"
    />
  </div>
</div>
